<template>
	<view class="loading-wait" >
		<div class="spinner"></div>
	</view>
</template>

<script>
	export default {
		name:"loading-wait",
		data() {
			return {
				
			};
		}
	}
</script>

<style scoped lang="scss" >
	.loading-wait{
		position: fixed;
		width:91%;
		z-index:9;
		height:100%;
		margin:-15px -15px;
		display: flex;
		background-color: rgba(100, 100, 100, .2);
		justify-content: center;
		align-items: center;
	}
	/* From Uiverse.io by AqFox */ 
	.spinner {
	 width: 66px;
	 height:66px;
	 display: grid;
	 color: $uni-color-primary;
	 background: radial-gradient(farthest-side, currentColor calc(100% - 7px),#0000 calc(100% - 6px) 0);
	 -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 15px),#000 calc(100% - 20px));
	 border-radius: 50%;
	 animation: spinner-sm4bhi 2s infinite linear;
	}
	
	.spinner::before,
	.spinner::after {
	 content: "";
	 grid-area: 1/1;
	 background: linear-gradient(currentColor 0 0) center,
	          linear-gradient(currentColor 0 0) center;
	 background-size: 100% 11px,11px 100%;
	 background-repeat: no-repeat;
	}
	
	.spinner::after {
	 transform: rotate(45deg);
	}
	
	@keyframes spinner-sm4bhi {
	 100% {
	  transform: rotate(1.4turn);
	 }
	}
</style>